<template>
  <div id="legalRules">
    <!-- <top-bar :title="title"></top-bar> -->
    <div class="legal_list">
      <h6>法律条款</h6>
      <ul>
        <li @click="Software">软件使用协议</li>
        <li style="line-height:30px" @click="Privacy">
          <span>个人信息保护及隐私政策</span>
        </li>
        <li style="line-height:30px" @click="UserAgreement">
          <span>市内用车、城际出行服务协议</span>
        </li>
        <li @click="TaxiAgreement">出租车服务协议</li>
        <li>城际闪送服务协议</li>
        <li @click="TrainAgreement">火车票用户服务协议</li>
        <li @click="TrainUserAgreement">12306账户授权协议</li>
      </ul>
    </div>
    <div style="clear:both"></div>
    <div class="legal_list" style="margin-top:30px;">
      <h6>平台规则</h6>
      <ul>
        <li @click="PassengerNotes">城际出行乘客须知</li>
        <li @click="IntercityOrderCancelRule">城际订单取消规则</li>
        <li @click="IncityCancelRule">市内订单取消规则</li>
        <li @click="TaxiOrderCancelRule">出租车订单取消规则</li>
        <li>城际闪送订单取消规则</li>
        <li @click="TrainNotes">火车票预定须知</li>
        <li @click="TrainRetreatNotes">火车票退改签须知</li>
      </ul>
    </div>
  </div>
</template>
<script>
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import axios from 'axios';
export default {
  components: {
    [TopBar.name]: TopBar
  },
  data() {
    return {
      title: '法律条款与平台规则'
    };
  },
  created() {},
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    Software() {
      this.$router.push({
        name: 'Software'
      });
    },
    UserAgreement() {
      this.$router.push({
        name: 'UserAgreement'
      });
    },
    TaxiAgreement() {
      this.$router.push({
        name: 'TaxiAgreement'
      });
    },
    TrainAgreement() {
      this.$router.push({
        name: 'TrainAgreement'
      });
    },
    TrainUserAgreement() {
      this.$router.push({
        name: 'TrainUserAgreement'
      });
    },
    Privacy() {
      this.$router.push({
        name: 'Privacy'
      });
    },
    PassengerNotes() {
      this.$router.push({
        name: 'PassengerNotes'
      });
    },
    IntercityOrderCancelRule() {
      this.$router.push({
        name: 'IntercityOrderCancelRule'
      });
    },
    TaxiOrderCancelRule() {
      this.$router.push({
        name: 'TaxiOrderCancelRule'
      });
    },
    TrainNotes() {
      this.$router.push({
        name: 'TrainNotes'
      });
    },
    TrainRetreatNotes() {
      this.$router.push({
        name: 'TrainRetreatNotes'
      });
    },
    IncityCancelRule() {
      this.$router.push({
        name: 'IncityCancelRule'
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6, h5 {
  display: block;
  font-size: 30px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#legalRules {
  .legal_list {
    padding: 10px 30px;
  }

  .legal_list h6 {
    color: #333;
    font-weight: 400;
  }

  .legal_list ul li {
    margin-top: 20px;
    width: 42%;
    float: left;
    margin-left: 2%;
    background-color: #EDEDED;
    font-size: 28px;
    color: #333;
    height: 96px;
    line-height: 96px;
    padding: 0px 2%;
  }

  .legal_list ul li span {
    position: relative;
    top: 20px;
  }
}
</style>
